var aA = document.querySelectorAll(".nav>li>a");
var aUl = document.querySelectorAll(".min-nav");
// 左边的下拉菜单

for (var i = 0; i < aA.length; i++) {
  aA[i].onclick = function () {
    var oUl = this.nextElementSibling;
    if (getComputedStyle(oUl).height == "0px") {
      for (var j = 0; j < aUl.length; j++) {
        aUl[j].style.height = "0px";
        aA[j].className = "";
      }
      oUl.style.height =
        oUl.children[0].scrollHeight * oUl.children.length + "px";
      this.className = "active";
    } else {
      oUl.style.height = "0px";
    }
  };
}

//页面中所有的数据
var data = [
  {
    id: 1,
    applyNumber: "E202207050001",
    receiptNumber: "20220704003",
    name: "王志勇1",
    time: "2022-7-4 17:14:12",
    day: "2",
    result: "审批中",
    founder: "备注说明展示",
  },
  {
    id: 2,
    applyNumber: "20220704002",
    receiptNumber: "20220704002",
    name: "孙志立1",
    time: "2022-7-4 17:14:12",
    day: "3",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 3,
    applyNumber: "20220704001",
    receiptNumber: "20220704001",
    name: "王志勇2",
    time: "2022-7-4 17:14:12",
    day: "4",
    result: "审批驳回",
    founder: "备注说明展示",
  },
  {
    id: 4,
    applyNumber: "20220703005",
    receiptNumber: "20220703005",
    name: "王志勇3",
    time: "2022-7-4 17:14:12",
    day: "2",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 5,
    applyNumber: "20220703004",
    receiptNumber: "20220703004",
    name: "王志勇4",
    time: "2022-7-4 17:14:12",
    day: "1",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 6,
    applyNumber: "20220703003",
    receiptNumber: "20220703003",
    name: "孙志立2",
    time: "2022-7-4 17:14:12",
    day: "1",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 7,
    applyNumber: "20220703002",
    receiptNumber: "20220703002",
    name: "王志勇5",
    time: "2022-7-4 17:14:12",
    day: "2",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 8,
    applyNumber: "20220703001",
    receiptNumber: "20220703001",
    name: "孙志立3",
    time: "2022-7-4 17:14:12",
    day: "4",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 9,
    applyNumber: "20220703001",
    receiptNumber: "20220703001",
    name: "孙志立4",
    time: "2022-7-4 17:14:12",
    day: "4",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 10,
    applyNumber: "20220703001",
    receiptNumber: "20220703001",
    name: "孙志立5",
    time: "2022-7-4 17:14:12",
    day: "4",
    result: "审批通过",
    founder: "备注说明展示",
  },
  {
    id: 11,
    applyNumber: "20220703001",
    receiptNumber: "20220703001",
    name: "孙志立6",
    time: "2022-7-4 17:14:12",
    day: "4",
    result: "审批通过",
    founder: "备注说明展示",
  },
];

//页面渲染
var page = 1; //当前页码
var count = 5; //每页条数
var renderArr = data.slice((page - 1) * count, page * count);
var oTbody = document.querySelector("tbody");
var oPagination = document.querySelector('.pagination');
var oPrevBtn=document.querySelector('.prev');
var oNextBtn=document.querySelector('.next');
var oSearchInp1=document.querySelector('.searchInp1');
var oSearchInp2=document.querySelector('.searchInp2');
var oSearchInp3=document.querySelector('.searchInp3');
var oSearchInp4=document.querySelector('.searchInp4');
var oSearchBtn=document.querySelector('.searchBtn');
oPrevBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
//上一页
function prev(){
  if(page>1){
    page--;
    render();
  }
}
//下一页
function next(){
  if(page< Math.ceil(data.length / count)){
    page++;
    render();
  } 
}
function render() {
  var str1=oSearchInp1.value;
  var str2=oSearchInp2.value;
  var str3=oSearchInp3.value;
  var str4=oSearchInp4.value;
  var data1=[];
  var data2=[];
  var data3=[];
  var searchData=[];
  // if(str.trim()==''){

  //   searchData=data
  // }else{
  //   for(var i=0;i<data.length;i++){
  //     if(data[i].name.includes(str)){
  //       searchData.push(data[i])
  //     }
  //   }
  // }
  if(str1.trim()==''){
    data1=data;
  }else{
    for(var i=0;i<data.length;i++){
      if(data[i].applyNumber.includes(str1)){
        data1.push(data[i])
      }
    }
  }
  if(str2.trim()==''){
    data2=data1;
  }else{
    for(var i=0;i<data1.length;i++){
      if(data1[i].receiptNumber.includes(str2)){
        data2.push(data1[i])
      }
    }
  }
  if(str3.trim()==''){
    data3=data2;
  }else{
    for(var i=0;i<data2.length;i++){
      if(data2[i].name.includes(str3)){
        data3.push(data2[i])
      }
    }
  }
  if(str4.trim()==''){
    searchData=data3;
  }else{
    for(var i=0;i<data3.length;i++){
      if(data3[i].time.includes(str4)){
        searchData.push(data3[i])
      }
    }
  }
    
  oTbody.innerHTML = ''
  var renderArr = searchData.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `
    <td>${renderArr[i].id}</td>
    <td>${renderArr[i].applyNumber}</td>
    <td>${renderArr[i].receiptNumber}</td>
    <td>${renderArr[i].name}</td>
    <td>${renderArr[i].time}</td>
    <td>${renderArr[i].day}</td>
    <td>${renderArr[i].result}</td>
    <td>${renderArr[i].founder}</td>`;
    oTbody.appendChild(oTr);
  }
  //渲染页码
  var aPageBtn = document.querySelectorAll('.pageBtn');
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
}
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class='pageBtn' href="#">${i}</a>`;
    if (i == page) {
      oLi.classList.add('active')
    }
    oPagination.insertBefore(oLi,oPagination.lastElementChild)
  }
}
render()
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
  if (event.target.className == 'pageBtn') {
    // var aPageBtn = document.querySelectorAll('.pageBtn');
    // for(var i=0;i<aPageBtn.length;i++){
    //   aPageBtn[i].parentNode.classList.remove('active');
    // }
    // event.target.parentNode.classList.add('active');
    page = event.target.innerText;
    render();
  }
}
//查询
oSearchBtn.addEventListener('click',searchFn)
function searchFn(){
  page=1;
  render();
}